<template>
  <div class="h5-wrapper">
    <div class="nav">
      <van-tabs v-model="active" sticky>
        <van-tab v-for="(item, index) in navList" :key="index" :title="item">
          <div class="content">
            <!-- 二级路由出口, -->
            <keep-alive :include="['LayoutPage', 'ArticlePage']">
              <router-view></router-view>
            </keep-alive>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 导航高亮
           1. 将a标签，替换成router-link (to)
           2. 结合高亮类名实现高亮效果 (router-link-active 模糊匹配)
      -->
    <van-tabbar
      route
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <van-tabbar-item to="/layout/article" icon="home-o">面经</van-tabbar-item>
      <van-tabbar-item to="/layout/collect" icon="search">收藏</van-tabbar-item>
      <van-tabbar-item to="/layout/like" icon="friends-o">喜欢</van-tabbar-item>
      <van-tabbar-item to="/layout/user" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link> -->
  </div>
</template>

<script>
//import { Notify } from "vant";
export default {
  // 组件名(如果没有配置 name，才会找文件名作为组件名)
  name: "LayoutPage",
  // 组件缓存了，就不会执行组件的created，mounted，destroyed等钩子
  // 所以提供了 actived 和 deactived
  data() {
    return {
      active: 0,
      navList: ["推荐", "最新"],
    };
  },
  created() {
    console.log("created 组件被加载了");
  },
  mounted() {
    console.log("mounted dom渲染完了");
  },
  destroyed() {
    console.log("destroyed 组件被销毁了");
  },

  activated() {
    console.log("activated 组件被激活了，看到页面了");
  },
  deactivated() {
    console.log("deactivated 组件失活，离开页面了");
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {
  .nav {
    margin-bottom: 51px;
    height: calc(100vh - 51px);
    background-color: red;
  }
}
</style>
